<template>
    <transition v-if="animate" name="ph-fade">
        <div v-show="visible" :class="cn"><slot></slot></div>
    </transition>
    <div v-else v-show="visible" :class="cn"><slot></slot></div>
</template>
<script lang="ts">
import { defineComponent ,computed } from 'vue'
export default defineComponent({
    props:{
        alpha:{type:Boolean,default:true},
        visible:{type:Boolean,default:false},
        animate:{type:Boolean,default:false}
    },
    setup(props){
        const cn =computed(()=>{
            return {
                'ph-layer':true,
                'ph-layer-alpha':props.alpha
            }
        })
        return {cn}
    }
})
</script>
<style lang="scss">
.ph-layer{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    &-alpha{
        background-color: transparent;
    }
}
</style>
